<template>
    <div class="chart-box">
        <div class="detail-value">
            <div>10512</div>
            <div>认定未结</div>
        </div>
        <div class="detail-value">
            <div>105122</div>
            <div>认定已结</div>
        </div>
        <div class="detail-value">
            <div>112312</div>
            <div>全流程网上办案率</div>
        </div>
        <div class="detail-value">
            <div>123123</div>
            <div>法官覆盖率</div>
        </div>
        <div class="detail-value">
            <div>12312</div>
            <div>电子送达数</div>
        </div>
        <div class="detail-value">
            <div>312</div>
            <div>单套制归档</div>
        </div>
    </div>
</template>

<script>

export default {
    name: "MapChart",
    data() {
        return {
        }
    },
    mounted() {
    }
}
</script>

<style lang="less" scoped>
.chart-box {
    height: 400px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    margin: 10px 0 0;

    .detail-value {
        width: 240px;
        height: 100px;
        background: url(../../../assets/box1.png);
        background-size: cover;
        background-repeat: no-repeat;
        margin: 0 15px 25px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0 100px 0 0;

        &>div:first-child {
            font-size: 20px;
            color: #FEFFFF;
            letter-spacing: 2px;
            margin: 5px 0 2px;
        }

        &>div:last-child {
            font-size: 16px;
            color: #00C5FF;
        }
    }
}
</style>